<template>
  <div>{{ a }}</div>
  <div>{{ b }}</div>
  <div>C:{{ c }}</div>
  <div>D:{{ d }}</div>
  <button @click="a++">a++</button>
  <button @click="b++">b++</button>
  <button @click="c.name = 'xiao'">改c</button>
  <button @click="changeC">changeC</button>
  <button @click="changeD">changeD</button>
  <button @click="changeNum">changeD-count</button>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'

const a = ref(1)
const b = ref(2)
let c = reactive({ name: 'han', age: 15 })
let d = ref({ name: 'han', age: 15, count: 0 })
const changeD = () => {
  d.value = { name: 'xiao', age: 18 }
}
const changeC = () => {
  //错误写法
  //   c = { name: 'xiao', age: 18 }
  //正确写法
  c.name = 'xiao'
  //   c.age = 18
}
const changeNum = () => {
  d.value.count++
}
watch(d, (newD, oldD) => {
  console.log('🚀 :', newD, oldD)
})
watch([a, b], ([newA, newB], [oldA, oldB]) => {
  console.log('🚀 ~ newA, newB:', newA, newB)
  console.log('🚀 ~ watch ~ oldA, oldB:', oldA, oldB)
})

watch(c, (newC, oldC) => {
  console.log('变化了')
  console.log('🚀 ~ watch ~ oldC:', oldC)
  console.log(newC.name, 'newC.name')
})
watch(
  () => c.name,
  (newName, oldName) => {
    console.log('🚀 ~ oldName:', oldName)
    console.log(newName, 'newName')
  },
)
</script>

<style lang="scss" scoped></style>
